<template>
  <view class="pages bg-#ffffff">
    <z-paging ref="pagingRef" v-model="dataList" :auto="false" @query="queryList">
      <template #top>
        <mt-navbar title="" :show-back="show" bg-color="rgba(0,0,0,0)">
          <template #right>
            <text class="text-28rpx text-#1484EE" @click="openCustomer">没有想选的</text>
          </template>
        </mt-navbar>
        <view class="text-48rpx text-#1C213E font-bold text-center pt-24rpx mb-62rpx">请选择绑定产品</view>
      </template>
      <view
        v-for="item in dataList"
        :key="item.id"
        class="flex items-center justify-between px-32rpx py-46rpx"
        style="border-bottom: 2rpx solid #e6e6e6"
        @click="handleBind(item)"
      >
        <view class="w-340rpx text-32rpx text-#1C213E ellipsis break-all">{{ item.productCategoryName }}</view>
        <view class="flex items-center">
          <text class="text-32rpx text-#727687 mr-16rpx">共{{ item.productCount }}个服务范围</text>
          <uv-icon name="arrow-right" color="#727687" top="2rpx" size="32rpx"></uv-icon>
        </view>
      </view>
    </z-paging>

    <mt-modal ref="modalRef"></mt-modal>
  </view>
</template>

<script setup>
import { productCategorygetParentProductCategoryProductPage, providerProductApplybindCluePacketProductCategoryApp } from '@/api/index';
function openCustomer() {
  let url = 'https://work.weixin.qq.com/kfid/kfc3edc43a42a4246f8';
  // #ifdef APP
  plus.runtime.openURL(url);
  // #endif
}

const modalRef = ref();
function handleBind(row) {
  modalRef.value.open({
    title: '温馨提示',
    content: '绑定产品大类后不可更改，是否绑定？',
    contentAlign: 'center',
    success: async (e) => {
      if (e.confirm) {
        await providerProductApplybindCluePacketProductCategoryApp({ productCategoryId: row.id });
        uni.showToast({
          icon: 'none',
          title: '绑定成功'
        });
        uni.redirectTo({
          url: `/pages/common/addProduct?productCategoryId=${row.defaultProductCategoryId}`
        });
      }
    }
  });
}

// 分页 ref
const pagingRef = ref(null);
const dataList = ref([]);
const lastId = ref('');

// 请求列表数据
async function queryList(pageNum, pageSize) {
  try {
    const params = {
      pageNum: pageNum,
      pageSize: pageSize,
      lastId: pageNum === 1 ? '' : lastId.value
    };
    let res = await productCategorygetParentProductCategoryProductPage(params);
    const list = res.data?.items || [];
    lastId.value = list[list.length - 1]?.id;
    pagingRef.value.complete(res.data.items);
  } catch (e) {
    pagingRef.value.complete(false);
  }
}

const show = ref(false);
onLoad((options) => {
  show.value = options?.back !== '0';
  nextTick(() => {
    pagingRef.value.reload();
  });
});
</script>

<style lang="scss" scoped>
.pages {
  min-height: calc(100vh - var(--window-top));
  box-sizing: border-box;
}
</style>
